// import React from 'react'
// import {useSelector, useDispatch} from 'react-redux'
// export default function App() {
//   const num = useSelector(state => state.home.num)
//   const state = useSelector(state => {
//     console.log(state)
//   })
//   const loading = useSelector(state => state.loading.effects['home/asyncAdd'])
//   const dispatch = useDispatch();
//   return (
//     <div>
//       {
//         num
//       }
//       {loading && '加载中～～～～～'}
//       <button onClick={() => dispatch({type: 'home/add'})}>add</button>
//       <button onClick={() => dispatch({type: 'home/asyncAdd'})}>2秒后add</button>
//     </div>
//   )
// }


// import React, {useState, useEffect, useRef} from 'react'
// import axios from 'axios'
// export default function App() {

//   const [count, setCount] = useState(0);
//   const countRef = useRef(null)
//   // conmponDidMount() {}

//   useEffect(() => {
//     countRef.current = count;
//   })
//   useEffect(() => {
//     const timer = setInterval(() => {
//       setCount(countRef.current + 1)
//     }, 500);

//     return () => clearInterval(timer)
//   }, [])

//   return (
//     <div>
//       {
//         count
//       }
//       <button onClick={() => setCount(count + 1)}>+ 1</button>
//     </div>
//   )
// }



// import React, {useState, useRef, useEffect} from 'react'
// export default function App() {
//   const [count, setCount] = useState(0);
//   const btnRef = useRef(null);

//   useEffect(() => {
//     const handleClick = () => {
//       setCount(count + 1)
//     }
//     console.log('123')

//     btnRef.current.addEventListener('click', handleClick)

//     return () => btnRef.current.removeEventListener('click', handleClick)
//   })
//   return (
//     <div>
//       {
//         count
//       }
//       <button ref={btnRef}> + 1 </button>
//     </div>
//   )
// }

// import React, {memo, useState, useEffect, useMemo, useCallback} from 'react'



// const Child = memo(({timeCount, handleChange}) => {
//   console.log(timeCount)
//   return (
//     <div>
//       <input type="text" name="" id="" onChange={(e) => handleChange(e)} />
//     </div>
//   )
// })


// export default function App() {

//   const [count, setCount] = useState(0);
//   const [timeCount, setTimeCount] = useState(0);
//   const [text, setText] = useState('');

//   // useMemo 缓存的是 变量
//   const tiemObj = useMemo(() => {
//     return {
//       timeCount
//     }
//   }, [timeCount])

//   // useCallback 缓存的是 函数
//   const handleChange = useCallback((e) => {
//     setText(e.target.value)
//   }, [])

//   return (
//     <div>
//       {
//         count
//       }
//       {
//         text
//       }
//       <button onClick={() => setCount(count + 1)}> + 1</button>  
//       <button onClick={() => setTimeCount(timeCount + 1)}> GET TIME COUNT </button>  
//       <Child timeCount={tiemObj} handleChange={handleChange}></Child> 
//     </div>
//   )
// }



// import React, {useMemo, useState, useEffect} from 'react'

// const Child = ({count, children}) => {
//   const setCountNum = () => {
//     return children + '!!!!!'
//   }

//   const newCount = useMemo(() => setCountNum(), [children]);
//   console.log('123', newCount)

//   return (
//     <div>
//       {
//         newCount
//       }
//       {
//         children
//       }
//     </div>
//   )
// }

// export default function App() {
//   const [count, setCount] = useState(0)
//   const [counts, setCounts] = useState(0)
//   return (
//     <div>
//       <button onClick={
//         () => setCount(count + 1)
//         // setCounts(counts + 1)
//       }> + 1</button>

//       <button onClick={
//         () => setCounts(counts + 1)
//         // setCounts(counts + 1)
//       }> + 1new</button>
//       <Child count={count}>{counts}</Child>
//     </div>
//   )
// }


import React, { useEffect } from 'react'
import './App.css'
export default function App() {

    useEffect(() => {
        var map = new BMapGL.Map("container");
        var point = new BMapGL.Point(116.331398,39.897445);
        map.centerAndZoom(point,12);
        
        var geolocation = new BMapGL.Geolocation();
        geolocation.getCurrentPosition(function(r){
            if(this.getStatus() == BMAP_STATUS_SUCCESS){
                var mk = new BMapGL.Marker(r.point);
                map.addOverlay(mk);
                map.panTo(r.point);
                alert('您的位置：' + r.point.lng + ',' + r.point.lat);
            }
            else {
                alert('failed' + this.getStatus());
            }        
        });
    })
    return (
        <div id="App">
            <div className="title">哈哈哈</div>
            <button>按钮</button>
            <div id="container"></div>
        </div>
    )
}
